<template>
    <div>
        <div class="searchForm">
            <div>
                {{ttype==1?'付款日期':'收款日期'}}： 
				<el-date-picker
				      v-model="time"
					  size="small"
					  value-format="yyyy-MM-dd"
				      type="daterange"
				      range-separator="至"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期">
				</el-date-picker>	
            </div>
            <div >
        		<div style="display: flex;">
        			<div>
        				{{ttype==1?'供应商':'客户'}}：
        			</div>
        			<div>
        				<selectCustomer :supp="search_form.supplier" 
						:holder="ttype==1?'请输入供应商名称':'请输入客户名称'"
						@getCustomerName="getCustomerName" />
        			</div>
        		</div>
            </div>
			<div>
				账户： <el-select size="mini" v-model="bank_account" 
						placeholder="请选择">
						<el-option
						  v-for="item in backList"
						  :key="item.id"
						  :label="item.account_title"
						  :value="item.account_title">
						</el-option>
					  </el-select>
			</div>
			<div>
			    <el-button type="primary" size="mini" @click="search">检索</el-button>
			    <el-button size="mini" @click="clearSearch">重置/检索</el-button>
			</div>
			<div style="position: absolute;top: 10px;right: 20px;">
				<el-button type="primary" size="mini" @click="downLode">导出</el-button>
			</div>
        </div>
		
        <br>
        <el-table stripe :data="list"  
			 border  
			>
			<!-- <el-table-column  align="center"   prop="pay_id" label="单据号" /> -->
			<el-table-column  align="center" width="80"   label="单据号">
				<template slot-scope="scope">
				   <div>
					   <!-- <el-button @click="toPutPay(scope.row)" type="text" >
							{{$utils.sliceStr(scope.row.order_number,6)}}
					   </el-button> -->
					   <div class="button_text" 
							v-if="scope.$index+1!=list.length"
							@click="toPutPay(scope.row)">
						   {{$utils.sliceStr(scope.row.order_number,6)}}
					   </div>
					   <div v-else>
					   		总计
					   </div>
				   </div>
				</template>
			</el-table-column>
			
			
			<el-table-column  align="center"   prop="happen_date" width="100" 
				:label="ttype==1?'付款日期':'收款日期'" />
			<!-- <el-table-column  align="center"   prop="happen_date" label="发生日期" /> -->
			<el-table-column  align="center" width="160"   prop="account_type" :label="ttype!=1?'客户':'供应商'">
				<template slot-scope="scope">
					<div v-if="ttype!=1">
						{{scope.row.customer}}
					</div>
					<div v-else>
						{{scope.row.supplier}}
					</div>
				</template>
				
			</el-table-column>
			<el-table-column  align="center" width="350" prop="goods_name" label="商品名称" />
			<el-table-column  align="center"  prop="price" label="单价" />
			<el-table-column  align="center"  prop="goods_number" label="数量" />
			<el-table-column  align="center"   :label="ttype==1?'实际付款':'实际收款'">
				<template slot-scope="scope">
					<div>
						{{scope.row.one_pay}}
					</div>
				</template>	
			</el-table-column>
			
			<el-table-column  align="center"   prop="bank_account" label="账户" />
			<el-table-column width="150" align="center"   prop="add_time" label="制单日期" />
			<el-table-column  align="center"   prop="prepared_by" label="制单人" />
			<el-table-column  align="center"   prop="account_type" label="收款类型">
				<template slot-scope="scope">
					<div v-if="scope.$index+1!=list.length">
						<div v-if="ttype==1">
							<span v-if="scope.row.price>0">
								{{scope.row.account_type==0?'预付款':'商品付款'}}
							</span>
							<span v-else>
								{{scope.row.account_type==0?'付款':'商品退款'}}
							</span>
						</div>
						<div v-else>
							<span v-if="scope.row.price>0">
								{{scope.row.account_type==0?'预收款':'商品收款'}}
							</span>
							<span v-else>
								{{scope.row.account_type==0?'收款':'商品退款'}}
							</span>
						</div>
					</div>
				</template>	
			</el-table-column>
			<el-table-column align="center"   prop="remarks" label="备注" />	
			
        </el-table>
		<div class="page">
		    <el-pagination
		            background
		            @size-change="pageChange"
		            @current-change="handleCurrentChange"
		            :current-page="page"
		            :page-size="pageSize"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="page_totle">
		    </el-pagination>
		</div>
    </div>
</template>
<script>
	import selectCustomer from '@/components/selectCustomer.vue'
    export default {
        components:{
			selectCustomer
        },
		props:{
			ttype:{
				type:String,
				default:'1'
			}
		},
        data(){
            return {
				list:[],
				pageSize:20,
				page:1,
				page_totle:0,
				search_form:{
					supplier:'',
					start_time:"",
					end_time:"",
				},
				time:[],
				bank_account:'',
				backList:[]
            }
        },
        mounted(){
			// this.search_form.buyer_date = this.$utils.formatNowDate(2)
			let now = this.$utils.formatNowDate(2)
			this.time = [now,now]
			this.lodeList()
			this.lodeBackList()
        },
        methods:{
			lodeBackList(){
				this.$post('/baseInfo/getAccountList',{status:1},res=>{
					this.backList = res.data.data
				})
			},
			downLode(){
				
				let cid = sessionStorage.getItem('cid')
				
				if(this.time.length == 2){
					this.search_form.start_time = this.time[0]
					this.search_form.end_time = this.time[1]
				}else{
					this.search_form.start_time = ''
					this.search_form.end_time = ''
				}
				
				var start_time
				if(this.search_form.start_time){
					 start_time = '&start_time=' + this.search_form.start_time
				}else{
					 start_time = '&start_time='
				}
				
				var end_time
				if(this.search_form.end_time){
					 end_time = '&end_time=' + this.search_form.end_time
				}else{
					 end_time = '&end_time='
				}
				
				var supplier
				if(this.search_form.supplier){
					 supplier = '&supplier=' + this.search_form.supplier
				}else{
					 supplier = '&supplier='
				}
				
				var type = '&type=' + this.ttype
				
				
				let url = `${this.$domain}/excel/exportPutPayInfo?cid=${cid}${supplier}${start_time}${end_time}${type}`
				location.href = url
				
			},
			getCustomerName(val){
				this.search_form.supplier = val
			},
			clearSearch(){
				this.search_form  = {
				        supplier:'',
				        buyer_date:"",
				        goods_name:"",
				        start_time:"",
				        end_time:"",
				}
				this.bank_account = ''
				let now = this.$utils.formatNowDate(2)
				this.time = [now,now]
				this.page=1
				this.lodeList()
			},
			toPutPay(row){
				
				if(row.type==1){
					if(row.goods_name || row.price<0){
						this.jump(`/settlementSys/payAmount?order_number=${row.order_number}`)
					}else{
						this.jump(`/settlementSys/settlementPay?order_number=${row.order_number}`)
					}
					
					// this.$router.push({
					// 	path:'/settlementSys/payAmount',
					// 	query:{
					// 		order_number:row.order_number
					// 	}
					// })
				}else{
					if(row.goods_name || row.price<0){
						this.jump(`/settlementSys/putAmount?order_number=${row.order_number}`)
					}else{
						this.jump(`/settlementSys/settlementPut?order_number=${row.order_number}`)
					}
					
					// this.$router.push({
					// 	path:'/settlementSys/putAmount',
					// 	query:{
					// 		order_number:row.order_number
					// 	}
					// })
				}
			},
            lodeList(){
				if(this.time.length == 2){
					this.search_form.start_time = this.time[0]
					this.search_form.end_time = this.time[1]
				}else{
					this.search_form.start_time = ''
					this.search_form.end_time = ''
				}
				let params = {
					search_form:this.search_form,
					page:this.page,
					pageSize:this.pageSize,
					type:this.ttype,
					bank_account:this.bank_account
				}
				this.$post('/putpay/getPutPayInfoList',params,res=>{
					let data = res.data.data
					this.page_totle = data.count
					this.list = data.result
					
					if(this.list.length){
						this.list.push({
							order_number:'合计',
							one_pay:data.all_price,
						})
					}
					
				})
			},            
        }
    }
</script>
